<template>
	<view class="box">
		<view class="header">
			<view class="iconfont icon-fanhui" @click="fanhui">返回</view>
			<view class="">水表管理</view>
			<view class="" @click="xiznheng">新增</view>
		</view>
		<view class="dabox">
			<view class="shuru">
				<input type="text"   v-model="formInline.search"   @input="onSearch"  placeholder="请输入水表号" />
			</view>
				
			
			<view class="biao" v-for="i in  tobleData" :key="0"  @click="xinxi(i.sb_id)">
				<view class="A">
					<view>水表号</view>
					<view>{{i.sb_num}}</view>
				</view>
				<view class="B">
					<view>用水状态</view>
					<view>{{i.sb_yongshuileixing}}</view>
				</view>
				<view class="C">
					<view>状态</view>
					<view>{{i.sb_sh=='1'?'未审核':'审核成功'}}</view>
				</view>
			</view>
		
	
		
		</view>
	</view>
</template>

<script>
	import {
		ref,
		computed,
		reactive,
		toRefs,onMounted
	} from 'vue'
import http from '../../../utils/http.js'
	export default {
		setup() {
			let data = reactive({
			     table:[],
				  search: "",
				 formInline: {
				  search: "",
				   },
				xiznheng() {
					uni.navigateTo({
						url: '../xinzhengshuibiao/xinzhengshuibiao'
					})
				},
				xinxi(i) {
			
						uni.setStorageSync('xiugai', JSON.stringify(i));
					uni.navigateTo({
						url: '../tuihuixiugai/tuihuixiugai'
					})
				},
				
				onSearch: function() { 
				if (data.formInline.search.trim()) {
				 data.search = data.formInline.search
				 } else {
				   data.search = '';
				  }
         
				 },
			});
    

           onMounted(() => {
            http({
            	url: "/miniwatermeter/getReplace",
            	method: "get",
            					
            }).then((res) => {
            
            	data.table=res.data.data
             })
         })
		  
		  
		  
		  const tobleData = computed(() => {
		  if (data.search) {
		      		let arr = data.table.filter((v) => {
		      	
					 if ( String( v.sb_num ).indexOf(data.search) != -1) {
		      		    return v;
		      		         }
		      		     })
		      		     return arr;
		      		 } else {
		      		     return data.table;
		      		 }
		      		 
		  });
			return {
				...toRefs(data)
				,tobleData
			};
			
		},
		
		onLoad() {
		
			
			
		},
		methods: {
 fanhui:function(){
				uni.navigateBack({
					delta:1
				})
			}
		},
	}
</script>

<style lang="scss">
	@import url("~@/static/xzafont/font/iconfont.css");

	.header .icon-fanhui {
		font-size: 35rpx;
	}

	.box {
		font-size: 35rpx;
	}

	.dabox {
		margin: 15rpx 15rpx;
	}

	.header {
		display: flex;
		justify-content: space-between;
		/* background-color: #FFFFFF; */
		line-height: 90rpx;
		margin: 0 30rpx;
		border-bottom: 1rpx solid #F8F8F8;
	}

	.shuru {
		border: 1rpx solid #F8F8F8;
		border-radius: 40rpx;
		padding: 15rpx 15rpx;
	}

	.biao {
		border: 1rpx solid #F8F8F8;
		margin-top: 10rpx;
		padding: 20rpx 0;
	}

	.A,
	.B,
	.C {
		display: flex;
		flex-wrap: nowrap;
		padding: 5rpx 15rpx;
	}

	.A>view:nth-child(1),
	.B>view:nth-child(1),
	.C>view:nth-child(1) {
		width: 300rpx;
	}

	.A>view:nth-child(2),
	.B>view:nth-child(2),
	.C>view:nth-child(2) {
		color: #666666;
	}
</style>
